<template>
  <form class="login-form">
    <div class="form-row">
      <label for="userName">用户名:</label>
      <input name="userName" id="userName" placeholder="请输入用户名" v-model="user.userName">
    </div>
    <div class="form-row">
      <label for="passWord">密码:</label>
      <input type="password" name="passWord" id="passWord" placeholder="请输入密码" v-model="user.passWord">
    </div>
    <div class="form-opt">
      <div class="login-btn" @click="register">注册</div>
    </div>
  </form>
</template>
<script>
  export default{
    data () {
      return {
        user: {
          userName: '',
          passWord: ''
        }
      };
    },
    methods: {
      register () {
        console.log(this.user);
      }
    }
  };
</script>
<style scoped>
  .login-form{
    /*height: 200px;*/
    text-align: left;
  }
  .login-form>
  .form-row{
    line-height: 30px;
    margin-bottom: 10px;
  }

  .login-form>
  .form-opt{
    line-height: 30px;
    margin-bottom: 10px;
  }

  .login-form>
  .form-opt>
  .login-btn{
    width: 80px;
    text-align: center;
    line-height: 30px;
    background: linear-gradient(to bottom, rgba(79,192,141,1), rgba(21, 126, 77, 1));
    cursor: pointer;
    user-select: none;
  }

  .login-form>
  .form-opt>
  .login-btn:active{
    background: linear-gradient(to top, rgba(79,192,141,1), rgba(21, 126, 77, 1));
  }

  .login-form>
  .form-row>
  label{
    display: inline-block;
    width: 80px;
  }

  .login-form>
  .form-row>
  input{
    display: inline-block;
    width: 200px;
    height: 30px;
    border: 1px solid rgba(204, 204, 204, 1);
    text-indent: 10px;
  }
</style>
